<include file="public:headtop" />
<style>
*{margin: 0;padding: 0;}
.box{width:200px;height:200px;margin:10px auto;position:relative;}
.box div{position:absolute;top:0;left:0;border-radius:50%;height:160px;width:160px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;background-color: white}
.box .bg{border:#ece2d2 20px solid}
.box .bg2{border:#ece2d2 20px solid;clip:rect(0,100px,200px,0);}
.box .rount{border:#f5a100 20px solid;clip:rect(0,100px,200px,0);-webkit-transform:rotate(0deg);}
.box .rount2{border:#f5a100 20px solid;clip:rect(0,200px,200px,100px);-webkit-transform:rotate(0deg);display:none}
.box .num{font:bold 24px/160px tahoma;text-align:center;color:#f5a100;top:20px;left:20px;z-index:9;}
.points{width:200px;margin:10px auto;text-align: center;}
.font{font-size:20px;color:#f5a100;}
</style>
</head>
<body style="background:rgb(247, 236, 220)">

<div class="content" style="margin:15px;border-radius:5px;background:white;padding-bottom:10px">
<if condition="$online_user['id'] eq $userAddress['uid']">
    <img src="__STATIC__/weixin/images/index/address_rate_title.png" alt="" style="width:100%;margin-top:10px">
</if>
<div style="height:10px">&nbsp;</div>
<div class="box">
    <div class="bg"></div>
    <div id="rount" class="rount"></div>
    <div class="bg2"></div>
    <div id="rount2" class="rount2"></div>
    <div id="num" class="num">0</div>
</div>
<div class="points">
    <span style="display:none">0</span>
    <input type="range" style='display:none' id="points" min="0" max="100" step="1" value="{$address.request_num}" />
    <span style="display:none">100</span>
</div>
            
<div style="clear:both"></div>
<div style="font-size:16px;text-align:center;color:#444;width:90%;margin:0 auto">
    <if condition="$address.status eq 0">
    还差<span class='font'><php>echo 30-$address['request_num']</php>人</span>就可以配送了哦~
    <else/>
    已开通
    </if>

</div>

<if condition="$online_user['id'] neq $userAddress['uid']">
    <script charset="utf-8" type="text/javascript" src="__STATIC__/weixin/js/dialog.js" id="dialog_js"></script>
    <script charset="utf-8" type="text/javascript" src="__STATIC__/weixin/js/jquery.ui.js" ></script>
    <script charset="utf-8" type="text/javascript" src="__STATIC__/weixin/js/jquery.validate.js" ></script>
    <script charset="utf-8" type="text/javascript" src="__STATIC__/weixin/js/mlselection.js" ></script>
    <script type="text/javascript" language="javascript" src='__STATIC__/weixin/js/dizhi2.js'></script>
    <script src="__STATIC__/weixin/js/index.js"></script>
    <script>
      var PCAD = "{$address_str}";
    </script>
    <script type="text/javascript" language="javascript" src='__STATIC__/weixin/js/diqu2.js'></script>
    <link rel="stylesheet" type="text/css" href="__STATIC__/weixin/css/jquery.ui.css" /></head>
    <body onLoad="setup()">
    <include file="public:head" />
    <script type="text/javascript" src="__STATIC__/weixin/js/jquery_002.js" charset="utf-8"></script>
    <script type="text/javascript">
    //<!CDATA[
    $(function(){
        regionInit("region");
        $('#address_form').validate({
            /*errorPlacement: function(error, element){
                var _message_box = $(element).parent().find('.field_message');
                _message_box.find('.field_notice').hide();
                _message_box.append(error);
            },
            success       : function(label){
                label.addClass('validate_right').text('OK!');
            },*/
            errorLabelContainer: $('#warning'),
            invalidHandler: function(form, validator) {
               var errors = validator.numberOfInvalids();
               if(errors)
               {
                   $('#warning').show();
               }
               else
               {
                   $('#warning').hide();
               }
            },
            onkeyup : false,
            rules : {
                consignee : {
                    required : true
                },
                sheng : {
                    required : true
                  
                },
                address   : {
                    required : true
                },
                phone_mob : {
                    required : true,
                    minlength:6,
                    digits : true
                }
            },
            messages : {
                consignee : {
                    required : '请填写收货人姓名. '
                },
                sheng : {
                    required : '请选择所在地区. '
                 
                },
                address   : {
                    required : '请填写详细地址. '
                },
                phone_mob : {
                    required : '固定电话和手机请至少填写一项. ',
                    minlength: '错误的手机号码,只能是数字,并且不能少于6位. ',
                    digits : '错误的手机号码,只能是数字,并且不能少于6位. '
                }
            }
        });
    });
    function check_phone(){
        return ($('[name="phone_tel"]').val() == '' && $('[name="phone_mob"]').val() == '');
    }
    function hide_error(){
        $('#region').find('.error').hide();
    }
    //]]>
    </script>
    <div class="add mt20">
      <img src="/static/weixin/images/index/address_title.png" alt="" style='width:100%'>
    
        <div id="warning"></div>
        <form method="post" action="{:u('user/addaddress')}" id="address_form">
            <ul class="form_address">
                <li>
            <select name="sheng" id="s1"></select>
        <select name="shi" id="s2"></select>
         <select name="qu" id="s3"></select>
         <select name="business_area"></select>
        <select name="building"></select>
                <script language="javascript">
                    new PCAS("sheng","shi","qu","","","");
                </script>
                </li>
                <li>
                    <p class="title mt10">收货人：
                    <input value="" name="consignee" id="consignee" class="text" type="text">
                    </p>
                </li>
                <li>
                    <p class="title">门牌号：<input value="" name="address" id="address" class="text width1" type="text"></p>
                </li>
                <li>
                    <p class="title">手机号：<input id="phone_mob" name="phone_mob" class="text" type="text"></p>
                    <!-- <p><input value="" id="phone_mob" name="phone_mob" class="text" type="text"></p> -->
                </li>

            </ul>
            <div class="submit" style="margin:20px">
                <img onclick="$('#address_form').submit()" src="/static/weixin/images/index/submit.png" alt="" style="width:100%">
            </div>
        </form>
    </div>
<else/>
<div style="width:80%;margin:0 auto;margin-top:20px">
    <img onclick="showCover()" style="width:100%" src="__STATIC__/weixin/images/index/help_address.png" alt="">
</div>
</if>



</div>
<script>
$(function(){
    $("#s1").val("{$userAddress.sheng}")
    $("#s1").change()
    $("#s2").val("{$userAddress.shi}")
    $("#s3").val("{$userAddress.qu}")
    $("select[name='business_area']").append("<option value='{$userAddress.business_area}'>{$userAddress.business_area}</option>")
    $("select[name='building']").append("<option value='{$userAddress.building}'>{$userAddress.building}</option>")

})

wx.ready(function () {
wx.onMenuShareAppMessage({
  title: "快来和我一起开通商圈吧",
  desc: "早点约我，开通商圈后，营养早餐每天送到你的面前，还等什么，快去开通吧！",
  link: "{:u('user/address','','','',true)}",
  imgUrl: "http://www.bf521.com/static/images/logo.jpg",
  trigger: function (res) {
    //alert('用户点击发送给朋友');
  },
  success: function (res) {
    hideCover()
  },
  cancel: function (res) {
    //alert('已取消');
  },
  fail: function (res) {
    alert(JSON.stringify(res));
  }
});
//alert('已注册获取“发送给朋友”状态事件');
});

$( document ).ready(function() { 
    $('#myStat').circliful();
    $("#myStat").css('margin-left',($(window).width()-300)/2)
}); 
function round(){
    var points = document.getElementById('points'),
    rount = document.getElementById('rount'),
    rount2 = document.getElementById('rount2'),
    num = document.getElementById('num');
    points.onchange=function(){
        var n =points.value;
        num.innerHTML = n + "%";
        if(n<=50){
            rount.style.webkitTransform="rotate(" + 3.6*n + "deg)";
            rount2.style.display="none";
        }else{
            rount.style.webkitTransform="rotate(180deg)";
            rount2.style.display="block";
            rount2.style.webkitTransform="rotate(" + 3.6*(n-50) + "deg)";
        }
    }
}
round();
$("#points").change()
</script> 
</div>
<include file="public:footer" />
</body>
</html>




<!-- <include file="public:headtop" />
<script src="__STATIC__/js/jquery.circliful.min.js"></script>
<style>
.content{
    background-color: #ffffed;
    border-radius:5px;
    margin:10px;
    padding:10px;

}

*{margin: 0;padding: 0;}
.box{width:200px;height:200px;margin:10px auto;position:relative;}
.box div{position:absolute;top:0;left:0;border-radius:50%;height:160px;width:160px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}
.box .bg{border:silver 20px solid}
.box .bg2{border:silver 20px solid;clip:rect(0,100px,200px,0);}
.box .rount{border:green 20px solid;clip:rect(0,100px,200px,0);-webkit-transform:rotate(0deg);}
.box .rount2{border:green 20px solid;clip:rect(0,200px,200px,100px);-webkit-transform:rotate(0deg);display:none}
.box .num{font:bold 24px/160px tahoma;text-align:center;color:green;top:20px;left:20px;z-index:9;}
.points{width:200px;margin:10px auto;text-align: center;}
</style>

<div class="content" style=>
    <img src="__STATIC__/weixin/images/index/address_rate_title.png" alt="" style="width:100%">

<div class="box">
    <div class="bg"></div>
    <div id="rount" class="rount"></div>
    <div class="bg2"></div>
    <div id="rount2" class="rount2"></div>
    <div id="num" class="num">0</div>
</div>
<div class="points">
    <span>0</span>
    <input type="range" id="points" min="0" max="100" step="1" value="0" />
    <span>100</span>
</div>

<script>
    function round(){
        var points = document.getElementById('points'),
            rount = document.getElementById('rount'),
            rount2 = document.getElementById('rount2'),
            num = document.getElementById('num');
        points.onchange=function(){
            var n =points.value;
            num.innerHTML = n + "%";
            if(n<=50){
                rount.style.webkitTransform="rotate(" + 3.6*n + "deg)";
                rount2.style.display="none";
            }else{
                rount.style.webkitTransform="rotate(180deg)";
                rount2.style.display="block";
                rount2.style.webkitTransform="rotate(" + 3.6*(n-50) + "deg)";
            }
        };
    }
    round();

    $("#points").val(40);
    $("#points").change()
</script>
 -->

